<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时交易量走势图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #1e1e2f;
            color: #ffffff;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #27293d;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.3);
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #3a3a5d;
        }
        .title {
            font-size: 24px;
            font-weight: bold;
            color: #e9e9e9;
        }
        .last-update {
            font-size: 14px;
            color: #9b9b9b;
        }
        .chart-container {
            height: 500px;
            margin-bottom: 20px;
        }
        .controls {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        button {
            background-color: #4c84ff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #3a6bd3;
        }
        .status {
            font-size: 14px;
            color: #9b9b9b;
            text-align: right;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="title">实时交易量走势图</div>
            <div class="last-update">最后更新: <span id="update-time">--</span></div>
        </div>
        <div id="chart" class="chart-container"></div>
        <div class="controls">
            <button id="pause-btn">暂停更新</button>
            <button id="refresh-btn">立即刷新</button>
        </div>
        <div class="status">
            <span id="status-text">数据更新中...</span>
        </div>
    </div>

    <script>
        // 初始化ECharts实例
        const chartDom = document.getElementById('chart');
        const myChart = echarts.init(chartDom, 'dark');
        let chartData = [];
        let updateInterval;
        let isPaused = false;
        
        // 初始化图表配置
        const option = {
            backgroundColor: 'transparent',
            animation: false,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['交易量']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value',
                min: 'dataMin',
                max: 'dataMax'
            },
            series: [
                {
                    name: '交易量',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    lineStyle: {
                        width: 2,
                        color: '#4c84ff'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(76, 132, 255, 0.6)' },
                            { offset: 1, color: 'rgba(76, 132, 255, 0.1)' }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                }
            ]
        };
        
        // 设置初始配置
        myChart.setOption(option);
        
        // 生成模拟数据（实际应用中应从服务器获取）
        function generateMockData() {
            const now = new Date();
            const baseValue = Math.round(Math.random() * 1000) + 500;
            const newData = {
                time: now.toLocaleTimeString(),
                value: baseValue + Math.round(Math.random() * 200 - 100)
            };
            return newData;
        }
        
        // 模拟从服务器获取数据（实际应用中应使用AJAX请求）
        function fetchDataFromServer() {
            return new Promise((resolve) => {
                // 模拟网络延迟
                setTimeout(() => {
                    const newData = generateMockData();
                    resolve(newData);
                }, 500);
            });
        }
        
        // 更新图表数据
        async function updateChartData() {
            if (isPaused) return;
            
            document.getElementById('status-text').textContent = '数据更新中...';
            
            try {
                const newData = await fetchDataFromServer();
                
                // 添加新数据
                chartData.push(newData);
                
                // 保持数据量在100个点以内
                /*if (chartData.length > 100) {
                    chartData.shift();
                }*/
                
                // 提取时间和值
                const times = chartData.map(item => item.time);
                const values = chartData.map(item => item.value);
                
                // 更新图表
                myChart.setOption({
                    xAxis: {
                        data: times
                    },
                    series: [{
                        data: values
                    }]
                });
                
                // 更新最后更新时间
                document.getElementById('update-time').textContent = new Date().toLocaleTimeString();
                document.getElementById('status-text').textContent = '数据已更新';
                
                setTimeout(() => {
                    document.getElementById('status-text').textContent = '等待下一次更新...';
                }, 2000);
                
            } catch (error) {
                console.error('数据获取失败:', error);
                document.getElementById('status-text').textContent = '数据更新失败';
            }
        }
        
        // 初始化数据
        async function initData() {
            // 先加载10个初始数据点
            for (let i = 0; i < 10; i++) {
                const data = generateMockData();
                chartData.push(data);
            }
            
            // 提取时间和值
            const times = chartData.map(item => item.time);
            const values = chartData.map(item => item.value);
            
            // 更新图表
            myChart.setOption({
                xAxis: {
                    data: times
                },
                series: [{
                    data: values
                }]
            });
            
            // 设置最后更新时间
            document.getElementById('update-time').textContent = new Date().toLocaleTimeString();
            document.getElementById('status-text').textContent = '等待下一次更新...';
            
            // 启动定时更新
            startAutoUpdate();
        }
        
        // 开始自动更新
        function startAutoUpdate() {
            if (updateInterval) {
                clearInterval(updateInterval);
            }
            updateInterval = setInterval(updateChartData, 2000); // 30秒更新一次
            isPaused = false;
            document.getElementById('pause-btn').textContent = '暂停更新';
        }
        
        // 暂停自动更新
        function pauseAutoUpdate() {
            if (updateInterval) {
                clearInterval(updateInterval);
                updateInterval = null;
            }
            isPaused = true;
            document.getElementById('pause-btn').textContent = '继续更新';
            document.getElementById('status-text').textContent = '更新已暂停';
        }
        
        // 事件监听
        document.getElementById('pause-btn').addEventListener('click', function() {
            if (isPaused) {
                startAutoUpdate();
            } else {
                pauseAutoUpdate();
            }
        });
        
        document.getElementById('refresh-btn').addEventListener('click', updateChartData);
        
        // 初始化
        initData();
        
        // 响应窗口大小变化
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>
</body>
</html>